import React from "react";
import { createStyles } from "antd-style";
import { CheckOutlined } from "@ant-design/icons";

import bgImgUrl from "./img/bg.png";
import logoImgUrl from "./img/logo.svg";


// 产品特征
const EnumProdFeatures = [
  "无需模特，AI穿衣",
  "可商用AI模特换脸",
  "POD爆款素材裂变",
  "零成本做AI商拍图",
  "AI写高质量Listing",
];

const Marketing: React.FC = () => {
  const { styles } = useStyle();

  return <div className={styles.marketing}>
    <div className="logo">
      <img src={logoImgUrl} style={{ width: 160, height: 35 }} />
    </div>
    <div className="title">
      <p>电商专用AI</p>
      <p>百万卖家的选择</p>
    </div>
    <div className="info">
      {EnumProdFeatures.map((value, index) => <p key={index}>
        <CheckOutlined style={{ fontSize: 12, color: "#0000004d" }} />
        <span>{value}</span>
      </p>)}
    </div>
  </div>
}

export default Marketing;


const useStyle = createStyles(({ css }) => ({
  marketing: css`
    height: 100%;
    width: 350px;
    padding: 50px;
    background-image: url(${bgImgUrl});
    background-size: 100% 100%;

    & > .logo{
      margin: 20px 16px 70px;
      display: flex;
      font-size: 160px;
      height: 35px;
      color: #723cf9;
      overflow: hidden;
    }

    & > .title{
      width: 100%;
      box-sizing: border-box;
      padding-left: 24px;
      margin-bottom: 40px;

      & > p{
        margin: 0;
        font-size: 28px;
        font-weight: 500;
        color: #000000d9;
        letter-spacing: .05em;
      }
    }

    & > .info{
      width: 100%;
      box-sizing: border-box;
      padding-left: 24px;

      & > p{
        margin: 0;
        font-size: 16px;
        letter-spacing: .05em;
        color: #000000d9;
        margin-bottom: 16px;
      }
    }

  `,
}))
